//
import * as React from "react";
import * as GoldenLayout from "golden-layout";
//
import * as mvc from "common/mvc";
//
import * as dbtps from "../../types";
import { BaseView } from "../../base";
import Document from "../../model/document";
//
import TopMenuComponent from "./TopMenu";
import WelcomeComponent from "./Welcome";
import DocumentComponent from "./Document";
import LibraryComponent from "./Library";
import SceneComponent from "./Scene";
import ZOrderComponent from "./ZOrder";
import PropertyComponent from "./Property";
import AnimationComponent from "./Animation";
import TimelineComponent from "./Timeline";
import CurveComponent from "./Curve";
/**
 * 应用视图。
 */
export class ApplicationView extends BaseView<mvc.Model, ApplicationComponent> {
    public layout: GoldenLayout;

    protected _initialize(): void {
        const dbtps = this.application.dbtps; // 初始化问题
        const componentType = dbtps.ComponentType;
        // 侦听数据通知。
        this._addNotification(dbtps.MNotificationType.ApplicationOpenDocument, this._modelNotificationHandler);
        // 布局初始化。
        this.layout = new GoldenLayout(this.application.layout, this.component.refs.content);
        this.layout.registerComponent(componentType.Welcome.toString(), WelcomeComponent);
        this.layout.registerComponent(componentType.Document.toString(), DocumentComponent);
        this.layout.registerComponent(componentType.Library.toString(), LibraryComponent);
        this.layout.registerComponent(componentType.Scene.toString(), SceneComponent);
        this.layout.registerComponent(componentType.ZOrder.toString(), ZOrderComponent);
        this.layout.registerComponent(componentType.Property.toString(), PropertyComponent);
        this.layout.registerComponent(componentType.Animation.toString(), AnimationComponent);
        this.layout.registerComponent(componentType.Timeline.toString(), TimelineComponent);
        this.layout.registerComponent(componentType.Curve.toString(), CurveComponent);

        ((this.layout as any) as GoldenLayout.EventEmitter).on( // GoldenLayout 的 types 与 js 不一致。。。
            "initialised",
            () => { // GoldenLayout initialised handler.
            }
        );

        this.layout.init();
    }

    private _modelNotificationHandler(notification: dbtps.Notification): void {
        const dbtps = this.application.dbtps; // 初始化问题
        switch (notification.type) {
            case dbtps.MNotificationType.ApplicationOpenDocument:
                {
                    const model = notification.data as Document;
                    const welcomeItem = this.layout.root.getItemsById(dbtps.ComponentType.Welcome.toString())[0];
                    console.assert(welcomeItem != null);

                    const config = this._createDocumentConfig(model);
                    welcomeItem.parent.addChild(config);
                }
                break;

            case dbtps.MNotificationType.ApplicationCloseDocument:
                break;

            case dbtps.MNotificationType.ApplicationActiveDocumentChange:
                {
                    const model = notification.data as Document;
                    const documentItem = this.layout.root.getItemsById(model.id)[0];
                    console.assert(documentItem != null);

                    documentItem.setActiveContentItem(documentItem);
                }
                break;
        }
    }

    private _createDocumentConfig(model: Document): GoldenLayout.ItemConfigType {
        const dbtps = this.application.dbtps; // 初始化问题
        return {
            type: "react-component",
            component: dbtps.ComponentType.Document.toString(),
            title: model.title,
            id: model.id,
            isClosable: true,
            props: {
                model: model,
                layout: this.layout
            }
        };
    }
}
/**
 * 应用组件。
 */
export default class ApplicationComponent extends React.Component<null, null> {
    refs: {
        content: HTMLElement
    };

    componentDidMount() {
        // 注册视图。
        const view = ApplicationView.getInstance(ApplicationView);
        view.initialize(null as any, this); // 
    }

    render() {
        return (
            <div style={{ width: "100%", height: "100%" }}>
                <TopMenuComponent style={{ width: "100%", height: "100%" }} />
                <div ref="content" style={{ width: "100%", height: "100%" }}></div>
            </div>
        );
    }
}